<template>
  <div>
    <div style="margin-top: 15px;">
      <el-button size="mini" :type="status==-1?'primary':''" round @click="statusQuery(-1)">全部</el-button>
      <el-button size="mini" :type="status==0?'primary':''" round @click="statusQuery(0)">未推送</el-button>
      <el-button size="mini" :type="status==1?'primary':''" round @click="statusQuery(1)">已推送</el-button>
    </div>
    <el-table :data="tableDataList" style="width: 100%;margin-top: 15px;" height="500" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
      <template slot="empty">
        <p>暂无优惠券</p>
      </template>
      <el-table-column prop="id" align="center" label="序号" min-width="10%">
      </el-table-column>
      <el-table-column prop="pic" :show-overflow-tooltip="true" align="center" label="图片" min-width="20%">
        <template slot-scope="scope">
          <img :src="scope.row.pic" width="64" height="64">
        </template>
      </el-table-column>
      <el-table-column prop="name" :show-overflow-tooltip="true" align="center" label="标题" min-width="30%">
      </el-table-column>
      <el-table-column prop="couponName" :show-overflow-tooltip="true" align="center" label="优惠券" min-width="20%">
      </el-table-column>
      <el-table-column prop="isTop" :show-overflow-tooltip="true" align="center" label="状态" min-width="10%">
        <template slot-scope="scope">
          <span v-if="scope.row.isTop==0">未推送</span>
          <span v-if="scope.row.isTop==1">推送中</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="10%">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isTop==0" type="text" size="mini" @click="pushScreen(scope.row)">推送</el-button>
          <el-button v-if="scope.row.isTop==0" type="text" size="mini" @click="deleteCoupons(scope.row)">删除</el-button>
          <el-button v-if="scope.row.isTop==1" type="text" size="mini" disabled>推送中</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 15px;text-align: right;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="创建直播间优惠券"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      @close="dialogClose">
      <el-form label-width="100px" size="mini" :model="dataForm" ref="ruleForm" :rules="rules">
        <el-row v-loading="addLoading">
          <el-col :span="24">
            <el-form-item label="活动名称：" prop="name">
              <el-input v-model="dataForm.name" maxlength="20" placeholder="最多可编辑20个字"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动图片：" prop="pic">
              <cy-file-upload
                v-model="dataForm.pic"
                @onSuccess="fileUploadSuccess"
              ></cy-file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="优惠券：" prop="couponName">
              <el-input placeholder="请选择优惠券" v-model="dataForm.couponName" disabled>
                <template slot="append">
                  <el-button type="primary" @click="couponDialogVisible = true">添加</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="dataForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center;">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" @click="add">确定</el-button>
      </div>
      <el-dialog
        title="选择优惠券"
        :visible.sync="couponDialogVisible"
        width="80%"
        append-to-body
        @closed="couponDialogClosed">
        <div>
          <el-form label-width="100px" size="mini" :model="couponDataForm">
            <el-row>
              <el-col :span="6">
                <el-form-item label="优惠券批次：">
                  <el-input v-model="couponDataForm.batchId" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" @click="couponQuery">查询</el-button>
                  <el-button @click="resetCoupon">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table :data="couponTableData" height="300" v-loading="loading" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
            <template slot="empty">
              <p>暂无数据</p>
            </template>
            <el-table-column prop="couponPlanId" :show-overflow-tooltip="true" align="center" label="方案编号" min-width="10%">
            </el-table-column>
            <el-table-column prop="couponName" :show-overflow-tooltip="true" align="center" label="方案名称" min-width="20%">
            </el-table-column>
            <el-table-column prop="id" :show-overflow-tooltip="true" align="center" label="优惠券批次" min-width="20%">
            </el-table-column>
            <el-table-column prop="maxOfferAmount" :show-overflow-tooltip="true" align="center" label="优惠最大金额" min-width="20%">
            </el-table-column>
            <el-table-column prop="batchStatus" :show-overflow-tooltip="true" align="center" label="状态" min-width="20%">
            </el-table-column>
            <el-table-column prop="applicantUsername" :show-overflow-tooltip="true" align="center" label="创建人" min-width="20%">
            </el-table-column>
            <el-table-column prop="createTime" :show-overflow-tooltip="true" align="center" label="创建时间" min-width="20%">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="20%">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="selectCoupon(scope.row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
  import CyFileUpload from "../../component/CyFileUpload";
  export default {
    name: "liveControllerCouponsManage",
    components: {
      CyFileUpload
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        dialogVisible: false,
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        cellStyle:{
          'font-size':'12px'
        },
        dataForm:{
          name:'',
          pic:'',
          couponName:'',
          couponId:''
        },
        tableDataList:[],
        tableData:[],
        pageRequest:{
          pageNum:1,
          pageSize:10
        },
        totalSize:0,
        status:-1,
        parentData:null,
        couponDialogVisible:false, // 优惠券窗口
        couponTableData:[],
        couponDataForm:{},
        loading:false,
        addLoading:false,
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          pic: [
            { required: true, message: '请选择公告图', trigger: 'change' }
          ],
          couponName: [
            { required: true, message: '请选择优惠券', trigger: 'blur' }
          ]
        }
      }
    },
    mounted: function () {
      this.parentData = this.data
      this.getData();
    },
    methods: {
      getData(){
        let params = {
          liveId:this.parentData.id,
          pageNum:this.pageRequest.pageNum,
          pageSize:this.pageRequest.pageSize
        }
        if(this.status>=0){
          params.isTop = this.status
        }
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/coupon/list',
          method: 'get',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.tableDataList = data.data.rows;
            this.totalSize = data.data.total;
          }
        })
      },
      resetCoupon(){ // 优惠券批次查询重置
        this.couponDataForm={}
      },
      couponDialogClosed(){ // 优惠券批次查询窗口关闭
        this.resetCoupon()
        this.couponTableData = []
      },
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.getData()
      },
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.getData()
      },
      cancel(){ // 取消
        this.dialogVisible = false
      },
      statusQuery(val){ // 状态查询
        this.status = val
        this.getData()
      },
      fileUploadSuccess(res, file) { // 文件上传成功回调
        this.dataForm.pic = res.data;
      },
      dialogClose(){ // 窗口关闭重置表单
        this.$refs.ruleForm.resetFields()
      },
      pushScreen(row){ // 推屏
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/coupon/'+this.parentData.id+'/push/'+row.id,
          method: 'post'
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",row)
            this.getData()
          }
        })
      },
      couponQuery(){
        let batchId = this.couponDataForm.batchId
        if(batchId){
          this.loading = true
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/coupon/batch/'+batchId,
            method: 'get'
          }).then(result => {
            this.loading = false
            let data = result.data;
            if (data && data.code === '0') {
              this.couponTableData = data.data
            }
          })
            .catch(() => {
              this.loading = false
            });
        } else {
          this.$message.info("请输入优惠券批次号");
        }
      },
      add(){ //添加优惠券
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.dataForm.liveId = this.parentData.id
            this.addLoading=true;
            this.utils.request.liveRequest({
              url: '/api/v1/broadcast/coupon/add',
              method: 'post',
              params: this.dataForm
            }).then(result => {
              let data = result.data;
              if (data && data.code === '0') {
                this.dialogVisible = false
                this.$message.success("添加成功");
                this.getData()
              } else{
                this.$message.error("添加失败");
              }
              this.addLoading=false;
            })
          } else {
            return false;
          }
        });
      },
      deleteCoupons(row){ //删除
        this.editLoading=true
        let id = row.id;
        this.$confirm("确定删除吗", "提示", {type:'warning'}).then(() => {
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/coupon/delete',
            method: 'post',
            params: id
          }).then(result => {
            let data = result.data;
            if (data && data.code == '0') {
              this.getData();
              this.$message.success("删除成功");
            }else{
              this.$message.success("删除成功");
            }
          })
        })
      },
      selectCoupon(row){ // 添加优惠券
        this.dataForm.couponId = row.id
        this.dataForm.couponName = row.couponName
        this.couponDialogVisible = false
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
